<script>
import {mapState} from 'vuex'
import startEvent from "@/components/startEvent";
import ExclusiveGateway from "@/components/ExclusiveGateway";
import FormComponentName from "@/components/FormComponentName";
import nodeSelectDialog from '@/components/nodeSelectDialog'
export default {

  name: "TreeNodeControlPanel",
  data() {
    return {
      // 一个通过组件名称映射 实际组件的map对象
      components: {
        [FormComponentName.StartEvent]: startEvent,
        [FormComponentName.ExclusiveGateway]: ExclusiveGateway
      }
    }
  },
  computed: {
    ...mapState(['nodeTree'])
  },


  render(h, context) {
    const children = this.nodeTree.map(node => {

      // 从 vuex 中拿到组件的名称
      const componentName = node.component;
      // 通过 data() 中的map，将组件名称转换为 具体的组件
      const component = this.components[componentName];
      // 通过组件 创建 vue 虚拟dom 节点
      return h(component)
    })

    const comp = h('div', {
      // 使用 vue 直接渲染 html 标签
      domProps: {
        innerHTML: `
      <h1>我是html组件</h1>
      <hr/>
      <h2>我可以被渲染出来吗</h2>
    `
      }
    })

    children.push(comp)
    children.push(h(nodeSelectDialog))
    children.push(h({
      template:`
      <router-link to="/editBpmn">跳转bpmn编辑</router-link>
      `
    }))
    // 使用 div 节点包围所有的虚拟节点
    return h('div', {}, children)
  }
}
</script>

<style scoped>

</style>
